Documentation

Feed Monster

Thank you so much for purchasing our item from codecanyon.

  • Created: 15 July, 2022
  • Update: 25 November, 2023

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Overview

Feed Monster is a HTML5 game where you have to simply score as many points by eating the small dots all around the maze, and you can eat the monsters for points effectively after eating the energizer. Experience endless maze instead of classic mode to challenge yourself for different game play.

The ZIP package contains the game with 1280×768 and 768×1024 resolution that scales proportionally to fit current screen device.

Installation

Follow the steps below to setup your game:

  1. To install the game just upload folder /game to your hosting web server using FTP or localhost in order to use it on your website. The game won't run locally with some browser like Chrome due to some security mode.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • game/assets - Images & audio files
    • game/css - Stylesheet files
    • game/js - Javacript files
    • game/edit.html - Built-in Editor page
    • game/editTools.html - Built-in Editor Tool
    • game/icon.ico - Website icon
    • game/share.jpg - Social share image
    • game/share.php - Social share file
    • game/index.html - Homepage
  3. You will need a website that runs PHP to make facebook share button work, and make sure to change Facebook Open Graph meta and Twitter meta in index.html, just replace [GAME_URL] to your game URL.
    4.                           
<!-- for Facebook -->
<meta property="og:image" content="[GAME_URL]/share.jpg" />
<meta property="og:url" content="[GAME_URL]" />

<!-- for Twitter -->
<meta name="twitter:image" content="[GAME_URL]/share.jpg" />

Settings

Follow the steps below to customize your game:

You can easily customize game text and settings in game.js file 

                        
//map settings
var mapSettings = {
	squareSize:24, //must be even number
	monsterSize:5, //must be even number
	biscuitSize:2, //biscuit size
	pillSize:5, //pill size
	design:{
		strokeNum:3 //wall size
	},
	keyboard:{ //keyboard code
		left:[37,65],
		right:[39,68],
		up:[38,87],
		down:[40,83],
	},
	mobileControl:"right", //mobile control position (left, center, right)
	userSpeed:2,
	ghostSpeed:2,
	ghostEatenSpeed:4,
	ghostEatableSpeed:1,
	countdownTimer:800, //countdown timer
	pillTimer:10000, //eaten pill end time
	ghostRecoverTimer:5000, //ghost recover time
	ghostBlinkTimer:300, //ghost blink timer
	collectShowTimer:15000, //collection show timer
	lives:3,
	score:{
		biscuit:10,
		pill:50,
		ghost:50,
		collection:100
	},
	loop:{ //map loop settings
		pillTarget:5, //show pill after 5 row/column 
		collectionTarget:15, //show collection after 15 row/column
		levels:[ //level settings
			{
				mapSpeed:.5,
				userSpeed:2,
				ghostSpeed:2,
				ghostEatenSpeed:4,
				ghostEatableSpeed:1,
				scoreTarget:800,
			},
			{
				mapSpeed:1,
				userSpeed:2,
				ghostSpeed:2,
				ghostEatenSpeed:4,
				ghostEatableSpeed:1,
				scoreTarget:1500,
			},
			{
				mapSpeed:1.5,
				userSpeed:3,
				ghostSpeed:3,
				ghostEatenSpeed:5,
				ghostEatableSpeed:2,
				scoreTarget:3000,
			},
			{
				mapSpeed:2,
				userSpeed:4,
				ghostSpeed:4,
				ghostEatenSpeed:6,
				ghostEatableSpeed:3,
				scoreTarget:4000,
			},
			{
				mapSpeed:2.5,
				userSpeed:4,
				ghostSpeed:4,
				ghostEatenSpeed:6,
				ghostEatableSpeed:3,
				scoreTarget:5000,
			},
			{
				mapSpeed:3,
				userSpeed:4,
				ghostSpeed:4,
				ghostEatenSpeed:6,
				ghostEatableSpeed:3,
				scoreTarget:6000,
			},
		]
	}
};

//game text display
var textDisplay = {
	gameReady:'GET READY!',
	gameReadyLevel:'LEVEL [NUMBER]',
	gameCountdown:["1","2","3"],
	gameOver:'GAME OVER',
	gameClear:'LEVEL CLEAR',
	gameScore:"SCORE : [NUMBER]PTS",
	gameLevel:"LEVEL : [NUMBER]",
	exitTitle:'Exit Game',
	exitMessage:'Are you sure you want\nto quit game?',
	share:'Share your score:',
	resultTitle:'GAME OVER',
	resultDesc:'[NUMBER]PTS',
}

//Social share, [SCORE] will replace with game score
var shareEnable = true; //toggle share
var shareTitle = 'Highscore on Feed Monster is [SCORE]pts';//social share score title
var shareMessage = '[SCORE]pts is mine new highscore on Feed Monster game! Try it now!'; //social share score message

The sound can be easily disabled to avoid compatibility issues in sound.js file: 

                         
var enableDesktopSound = true; //sound for dekstop
var enableMobileSound = true; //sound for mobile and tablet

Themes

You can easily customize themes in theme_settings in game.js file, it store all themes data and below is the explanation of each most important objects:

                        
var theme_settings = [
	{
		strokeColor:"#2422DC",
		biscuitColor:"#fff",
		pillColor:"#fff",
		gateColor:"#3888D7",
		user:"assets/item_theme1_user.png",
		ghosts:[
			"assets/item_theme1_monster1.png",
			"assets/item_theme1_monster2.png",
			"assets/item_theme1_monster3.png",
			"assets/item_theme1_monster4.png",
			"assets/item_theme1_monster5.png",
			"assets/item_theme1_monster6.png",
			"assets/item_theme1_monster7.png",
		],
		collection:[
			"assets/item_egg.png"
		]
	}
];
  • strokeColor - wall color
  • biscuitColor - bicsuit color
  • pillColor - pill color
  • gateColor - gate color
  • user - monster sprite sheet animation image
  • ghosts - ghosts array sprite sheet animation image
  • collection - collection array image

Maps

You can easily customize maps in maps_arr in maps.js file, it store all maps data and below is the explanation of each most important objects:

                        
var theme_settings = [
	{
		map:[
			[35,30,30,30,30,30,30,30,30,40,30,30,30,30,30,30,30,30,32],
			[31, 2, 2, 2, 2, 2, 2, 2, 2,61, 2, 2, 2, 2, 2, 2, 2, 2,31],
			[31, 3,65,62, 2,65,60,62, 2,61, 2,65,60,62, 2,65,62, 3,31],
			[31, 2,64,63, 2,64,60,63, 2,75, 2,64,60,63, 2,64,63, 2,31],
			[31, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,31],
			[31, 2,76,74, 2,77, 2,76,60,66,60,74, 2,77, 2,76,74, 2,31],
			[31, 2, 2, 2, 2,61, 2, 2, 2,61, 2, 2, 2,61, 2, 2, 2, 2,31],
			[34,30,30,32, 2,69,60,74, 2,75, 2,76,60,67, 2,35,30,30,33],
			[ 1, 1, 1,31, 2,61, 2, 2, 2, 2, 2, 2, 2,61, 2,31, 1, 1, 1],
			[30,30,30,33, 2,75, 2,35,30, 5,30,32, 2,75, 2,34,30,30,30],
			[ 1, 1, 1, 1, 2, 2, 2,31, 1, 1, 1,31, 2, 2, 2, 1, 1, 1, 1],
			[30,30,30,32, 2,77, 2,34,30,30,30,33, 2,77, 2,35,30,30,30],
			[ 1, 1, 1,31, 2,61, 2, 2, 2, 2, 2, 2, 2,61, 2,31, 1, 1, 1],
			[35,30,30,33, 2,75, 2,76,60,66,60,74, 2,75, 2,34,30,30,32],
			[31, 2, 2, 2, 2, 2, 2, 2, 2,61, 2, 2, 2, 2, 2, 2, 2, 2,31],
			[31, 2,76,62, 2,76,60,74, 2,75, 2,76,60,74, 2,65,74, 2,31],
			[31, 3, 2,61, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,61, 2, 3,31],
			[43,74, 2,75, 2,77, 2,76,60,66,60,74, 2,77, 2,75, 2,76,41],
			[31, 2, 2, 2, 2,61, 2, 2, 2,61, 2, 2, 2,61, 2, 2, 2, 2,31],
			[31, 2,76,60,60,68,60,74, 2,75, 2,76,60,68,60,60,74, 2,31],
			[31, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,31],
			[34,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,33],
			],
		startDirection:"left",
		startPos:[9,16],
		ghostPos:[9,8],
		ghostStayPos:[
			[9,10],
			[9,10],
			[8,10],
			[10,10],
			],
		multiPos:[
			[5,4],
			[13,4],
			[5,14],
			[13,14],
			],
		multiDirection:["left","right","left","right",],
		totalGhosts:[0,1000,5000,10000],
		loop:"",
	},
];
  • map - row and column in array, type of block:
    • 0 = Wall - Single Empty
    • 10 = Wall - Single Horizontal
    • 11 = Wall - Single Vertical
    • 12 = Wall - Single Corner (Left, Bottom)
    • 13 = Wall - Single Corner (Left, Top)
    • 14 = Wall - Single Corner (Top, Right)
    • 15 = Wall - Single Corner (Bottom, Right)
    • 16 = Wall - Single T-Junction (Bottom)
    • 17 = Wall - Single T-Junction (Right)
    • 18 = Wall - Single T-Junction (Top)
    • 19 = Wall - Single T-Junction (Left)
    • 20 = Wall - Single Cross
    • 30 = Wall - Double Horizontal
    • 31 = Wall - Double Vertical
    • 32 = Wall - Double Corner (Left, Bottom)
    • 33 = Wall - Double Corner (Left, Top)
    • 34 = Wall - Double Corner (Top, Right)
    • 35 = Wall - Double Corner (Bottom, Right)
    • 36 = Wall - Double T-Junction (Bottom)
    • 37 = Wall - Double T-Junction (Right)
    • 38 = Wall - Double T-Junction (Top)
    • 39 = Wall - Double T-Junction (Left)
    • 40 = Wall - Double T-Junction To Bold (Bottom)
    • 41 = Wall - Double T-Junction To Bold (Right)
    • 42 = Wall - Double T-Junction To Bold (Top)
    • 43 = Wall - Double T-Junction To Bold (Left)
    • 44 = Wall - Double End (Right)
    • 45 = Wall - Double End (Bottom)
    • 46 = Wall - Double End (Left)
    • 47 = Wall - Double End (Top)
    • 48 = Wall - Double Cross
    • 60 = Wall - Bold Double Horizontal
    • 61 = Wall - Bold Double Vertical
    • 62 = Wall - Bold Double Corner (Left, Bottom)
    • 63 = Wall - Bold Double Corner (Left, Top)
    • 64 = Wall - Bold Double Corner (Top, Right)
    • 65 = Wall - Bold Double Corner (Bottom, Right)
    • 66 = Wall - Bold Double T-Junction (Bottom)
    • 67 = Wall - Bold Double T-Junction (Right)
    • 68 = Wall - Bold Double T-Junction (Top)
    • 69 = Wall - Bold Double T-Junction (Left)
    • 70 = Wall - Bold Double T-Junction To Nomal (Bottom)
    • 71 = Wall - Bold Double T-Junction To Nomal (Right)
    • 72 = Wall - Bold Double T-Junction To Nomal (Top)
    • 73 = Wall - Bold Double T-Junction To Nomal (Left)
    • 74 = Wall - Bold Double End (Right)
    • 75 = Wall - Bold Double End (Bottom)
    • 76 = Wall - Bold Double End (Left)
    • 77 = Wall - Bold Double End (Top)
    • 78 = Wall - Bold Double Cross
    • 80 = Wall - Round
    • 1 = Empty
    • 2 = Biscuit
    • 3 = Pill
    • 4 = Block
    • 5 = Gate Horizontal
    • 6 = Gate Vertical
  • startDirection - monster start direction (left, right, up down)
  • startPos - monster start position
  • ghostPos - ghost start position
  • ghostStayPos - ghost stay arra position
  • multiPos - multiplayer start position array
  • multiDirection - multiplayer start direction array (left, right, up down)
  • totalGhosts - total ghosts and timer
  • loop - map loop (vertical, horizontal)

    • Note multiPos and multiDirection is used for Multiplayer add-on

Built-in Editor

This is the section where you can edit the map with the tool by running edit.html. The page start with edit tools, click generate button to export the array when you complete editing, replace the new array in maps_arr in maps.js file.

1. Basic Options
  1. First select the map you want to edit.
  2. Option to add, remove and sort map.
  3. This section is to edit map, and also output the new array.
    • Build Map - edit map settings
    • Test Play - test play your map
    • Generate Array - click to generate new Array, copy and replace into maps_arr in maps.js for new update

2. Edit Map
  1. Enter row and column to create map size.
  2. This section is to build wall design and positions:
    • Map Design - edit map design
    • User and Ghost Position - all start positions
  3. Map settings, click Update button to update new settings.

3. Map Design
  1. Follow instructions for shortcude key to build the design.
  2. Mouse over each block to see which collumn, row and type of Design.
  3. Select current wall design to replace the block on stage.

4. User and Ghost Position
  1. Place user and ghost start position.
  2. Add multiple ghost stay position.
  3. Place current ghost stay position.

HTML Structure

Structure used to design web pages including HTML structure, CSS Files, Javascript and more...

The page start with the loader wrapper that covering the whole screen in the body. It shows loader progress when calls the function initPreload()

                        
<!-- PERCENT LOADER START-->
<div id="mainLoader"><img src="assets/loader.png" /><br><span>0</span></div>
<!-- PERCENT LOADER END-->

This section is for browser not support page when calls the function checkBrowser(). It shows error message when detect the browser does not support canvas.

                        
<!-- BROWSER NOT SUPPORT START-->
<div id="notSupportHolder">
    <div class="notSupport">YOUR BROWSER ISN'T SUPPORTED.<br/>PLEASE UPDATE YOUR BROWSER IN ORDER TO RUN THE GAME</div>
</div>
<!-- BROWSER NOT SUPPORT END-->

Follow by one canvas tag in the body. The game start initiatie by calls the main function of the game initMain().

                        
<!-- CANVAS START-->
<div id="canvasHolder">
	<canvas id="gameCanvas" width="1280" height="768"></canvas>
</div>
<!-- CANVAS END-->

CSS Files

We're using two CSS files in this game. The first one is normalize.css a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file main.css contains all of the specific stylings for the canvas and some hack to be fully compatible with all most popular mobile device.

JavaScript

This game using Javascript files below.

  1. jquery.min.js - is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

  2. detectmobilebrowser.js - is a open source scripts to detect mobile browsers and phones.

  3. createjs.min.js - is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.

  4. TweenMax.min.js - is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).

  5. easystar-0.4.3.min.js - is an asynchronous A* pathfinding API written in Javascript for use in your HTML5 games and interactive projects.

  6. The game have the following js files

    • init.js - check if browser or device support
    • loader.js - loader to load all game images
    • main.js - initiate game setup and browser resize function
    • mobile.js - mobile orientation change
    • canvas.js - canvas setup and resize
    • sound.js - sound event
    • edit.js - editor tool
    • maps.js - maps settings
    • game.js - game play and logics
    • plugins.js - additonal useful plugins

Game Flow

  1. The index.html file start init.js for browser detection
  2. If browser is supported, init loader.js to start load asserts with loading progress
  3. For mobile the rotate instruction shows when device is in portrait view, detect by mobile.js
  4. When all asserts contained in /assets folder are loaded, the game start construct canvas.js from main.js thats shows game menu
  5. If user click startbutton in game menu, maps and theme selection will show
  6. If user click select button, the game will start with game.js
  7. Classic mode:
    • There are total 3 lives to play, game will restart when ghost eat user, game will over when 0 lives
    • User must score as many points by eating the small dots all around the maze
    • User can eat the monster after eating the energizer, energizer effect will disapper in time
    • Collect collection win score more points
    • User will reach next level when all dots and energizer are complete
  8. Loop mode:
    • The map will keep moving depend on direction, user will die if didn't stay in the map
    • User must score as many points by eating the small dots all around the maze
    • User can eat the monster after eating the energizer, energizer effect will disapper in time
    • Collect collection win score more points
    • User will reach next level after certain score, and the speed will increase
  9. If user Feed Monster of coloured disks (horizontal, vertical, or diagonal), user will score.
  10. If time is up, game result will shows
  11. If user click the main button in game result, it will go to menu

Game Functions

The most important functions used for page.

  • checkBrowser() This function is runs for browser detection
  • checkMobileEvent() This function runs for mobile event

The most important functions used for game.

  • initMain() This function build canvas
  • startGame() This function start gameplay
  • updateGame() This function manages the game loop
  • stopGame() This function stop gameplay
  • saveGame() This function save game score

Game Assets

You can edit the design files and easily reskin the game graphics.

The game contain /design folder which include following:

  • feedmonster_1280x768.psd - with layer folders below
    • Option
    • Result
    • Gameplay
    • Landing

The folder /game/assets contains all the images of the game that can be replaced. Is better to have the same size of the old ones if you want to reskin the game graphic without coding.

Compatibility

This game is build for Desktop browsers that support HTML5 canvas. Any mobile/tablet should work in landscape and portrait view, but they are not officially supported.

Add-ons

The add-on is an additional feature added to the game and it requires the base game in order to work, below are the add-ons that are compatible with this game:

This game is compatible with Scoreboard for HTML5 Games, it is a add-ons page where user can submit score and view top 10 leaderboard. You can get it here.


This game is compatible with Multiplayer add-on, it is a add-ons page where user can join and play with other online players. You can get it here.

Source & Credits

Fonts:

Images:

  • N/A

Sounds:

Support

If this documentation doesn't answer your questions, you can send us email via Item Support Page

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our game like bugs and errors. Custom modifications or third party module implementations are not included. Please read and check item support policy here.

Here you can find plugin & other documentation that support this game.

  • Wordpress Site - By using Scoreboard for HTML5 Games plugin, you can embed HTML5 game into WordPress post or page. Get the Plugin
  • Ad Placeholder - Help simulate ads on HTML5 Games, you can integrate and display static and takeover ads through different Ads Serving Platform. Documentation
  • Instant Games – Facebook - Guide you through integrating Facebook Instant Games API in our HTML5 Games. Documentation

Don’t forget to Rate this game

Please Add your Review (Opinion) for Our game. It would be a great support for us.
Go to your Codecanyon Profile > Downloads Tab > & then You can Rate & Review for our game.
Thank You.

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.8

  • Fixed scoreboard issue

Version 1.7

  • Prevent iframe scrolling

Version 1.6

  • Fixed score issue

Version 1.5

  • Improved multiplayer script

Version 1.4

  • Updated sound function
  • Added music button

Version 1.3

  • Added on-screen control
  • Fixed fullscreen issue

Version 1.2

  • Fixed map loop issue

Version 1.1

  • Fixed canvas issue

Version 1.0

Initial Release